import styled from "styled-components";
import {
  Fragment,
  useState,
  useRef,
  useEffect,
  MouseEventHandler,
  isValidElement,
  CSSProperties,
  ReactElement,
} from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import './style.module.scss'
interface item {
  lable?: string;
  style?: CSSProperties;
  container?: ReactElement;
}
const DockerContainer = styled.div`
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
`;
const Docker = styled.div`
  height: 100%;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
`;
const Menu = styled.div`
  display: flex;
  align-items: center;
  height: 100%;
`;
const MenuItem = styled.div`
  --scale: 1;
  border-radius: 5px;
  position: relative;
  margin: 0 10px;
  width: 30px;
  scale: var(--scale);
  height: 30px;
  border: 1px solid #34b5f6;
  transition: 0.1s all ease-out;
  text-align: center;
`;
const ViewBK = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
`;
const One = () => {
  return <div>背1111景</div>;
};
const list: Array<item> = [
  {
    style: {
      backgroundColor: "red",
    },
    container: <One />,
  },
  {
    style: {
      backgroundImage:
        "linear-gradient( 184.1deg,  rgba(249,255,182,1) 44.7%, rgba(226,255,172,1) 67.2% )",
    },
  },
  {
    style: {
      backgroundImage:
        "radial-gradient( circle farthest-corner at 10% 20%,  rgba(100,43,115,1) 0%, rgba(4,0,4,1) 90% )",
    },
  },
  {
    style: {
      backgroundImage:
        "radial-gradient( circle 325px at 19.2% 64.8%,  rgba(254,62,101,1) 9.7%, rgba(166,24,146,1) 91.3% )",
    },
  },
  {
    style: {
      backgroundImage:
        "radial-gradient( circle farthest-corner at 10.2% 55.8%,  rgba(252,37,103,1) 0%, rgba(250,38,151,1) 46.2%, rgba(186,8,181,1) 90.1% )",
    },
  },
  {
    style: {
      backgroundImage:
        "background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% )",
    },
  },
];
export function MacDocker() {
  const DockerRef = useRef<HTMLDivElement | null>(null);
  const ItemRefs = useRef<Array<HTMLDivElement | null>>([]);
  const [currentItem, setCurrentItem] = useState<item | undefined>(undefined);
  const resetScale = () => {
    ItemRefs.current.forEach((item) => {
      item?.style.setProperty("--scale", "1");
    });
  };
  const mouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
    e.preventDefault();
    let item = e.target as HTMLDivElement;
    let itemReact = item.getBoundingClientRect();
    let offset = Math.abs(e.clientX - itemReact.left) / itemReact.width;
    let prev = item.previousElementSibling || null;
    let next = item.nextElementSibling || null;
    let scale = 0.6;
    resetScale();
    if (prev) {
      (prev as HTMLDivElement).style.setProperty(
        "--scale",
        `${1 + scale * Math.abs(offset - 1)}`
      );
    }
    item.style.setProperty("--scale", "2");
    if (next) {
      (next as HTMLDivElement).style.setProperty(
        "--scale",
        `${1 + scale * offset}`
      );
    }
  };
  const mouseLeave = () => {
    resetScale();
  };

  useEffect(() => {
    console.log(DockerRef, ItemRefs);
  }, []);
  return (
    <>
      <DockerContainer>
        <Docker ref={DockerRef}>
          <Menu>
            {list.map((i, index) => (
              <Fragment key={index}>
                <MenuItem
                  ref={(val) => {
                    ItemRefs.current.push(val);
                  }}
                  key={index}
                  style={i.style}
                  onMouseMove={(evet) => {
                    mouseMove(evet);
                    setCurrentItem(i);
                  }}
                  onMouseLeave={(evet) => {
                    mouseLeave();
                    setCurrentItem(undefined);
                  }}
                >
                  {i.lable}
                </MenuItem>
              </Fragment>
            ))}
          </Menu>
        </Docker>
      </DockerContainer>
      <CSSTransition in={Boolean(currentItem)} timeout={20000} 
          classNames='coder' appear>
          <ViewBK>{currentItem?.container}</ViewBK>
        </CSSTransition>
    </>
  );
}
